<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                
                <el-form-item label="艺术家头像" prop="headUrl">
                     <my-upload-file v-model='ruleForm.headUrl' :disabled="onlyLook==1"/>
                  <!-- <div class="uploadimgbox">
                    <div class="upItem">
                        <p>上传艺术家头图</p>
                        <my-upload-file v-model='ruleForm.headUrl'/>
                    </div>
                    <div class="upItem">
                        <p>上传艺术家背景图片</p>
                        <my-upload-file v-model='ruleForm.backgroundUrl'/>
                    </div>
                  </div> -->
                </el-form-item>

                <el-form-item label="背景图片" prop="backgroundUrl">
                  <my-upload-file v-model='ruleForm.backgroundUrl' :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="昵称" prop="nick">
                  <el-input v-model="ruleForm.nick" placeholder="艺术家昵称" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="手机号码"  style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="艺术家个人简介" prop="introduce">
                   <el-input type="textarea" placeholder="艺术家个人简介" v-model="ruleForm.introduce" :autosize="{ minRows: 10, maxRows: 80}" :disabled="onlyLook==1"></el-input>
                </el-form-item>

                <el-form-item label="艺术家认证">
                  <el-checkbox v-model="checked" label="已认证" name="type" :disabled="onlyLook==1"></el-checkbox>
                </el-form-item>
                
                
                <el-form-item>
                    <template v-if="onlyLook==1">
                          <my-back type="info">返回</my-back>
                          <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                          <el-button type="warning" icon="el-icon-coordinate" :loading="btnLoading" @click="transformArtist">转为注册会员</el-button>
                      </template>
                      <template v-else>
                          <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="handleSave('ruleForm')">保存</el-button>
                          <my-back icon="el-icon-close">取消</my-back>
                      </template>
                </el-form-item>
            </el-form>
        </mian-layout>
</template>

<script>
import {
  addArtist,
  get_artist_detail,
  edit_artist_data,
  change_register_user
} from '@/api/arApi'
import myUploadFile from '@/components/public/myUploadFile.vue'
import {mergeObject,checkMobile} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
export default {
  name: '',
  components:{
    myUploadFile,
    myBack
  },
  data() {
    return {
      ruleForm: {
        authStatus:2,
        backgroundUrl:'',
        headUrl:'',
        introduce:'',
        phone:'',
        nick:''
      },
      checked:false,
      rules: {},
      id:'',
      onlyLook:'',
      btnLoading:false
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_artist_detail(this.id)
      if(res.success){
        this.ruleForm = mergeObject(this.ruleForm,res.data)
        this.ruleForm.authStatus==1?this.checked = true : this.checked = false
      }
    }
  },
  methods: {
    // 确定
    handleSave(formName) {
        if(!this.ruleForm.headUrl){
          return this.$message.warning('请上传艺术家图像')
        }else if(!this.ruleForm.backgroundUrl){
          return this.$message.warning('请上传艺术家背景图片')
        }else if(!this.ruleForm.nick){
          return this.$message.warning('请输入艺术家昵称')
        }else if(!this.ruleForm.phone){
          return this.$message.warning('请输入艺术家手机号')
        }
        if(this.checked){
            this.ruleForm.authStatus = 1
        }
        //this.btnLoading = true
        if(this.id) {
          edit_artist_data({artistId:this.id,...this.ruleForm}).then(res=>{
              if(res.success){
                  this.$message.success('修改成功！')
                  this.$store.dispatch('tagsView/myClosePageTab',this.$route)
                  //this.$router.back()
              }else{
                  //this.$message.error("修改失败")
              }
              this.btnLoading = false
          })
        }else{
          addArtist(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("新增失败")
            }
            this.btnLoading = false
          })
        }
    },
    transformArtist(){
        this.$confirm('确定转化为注册会员吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            this.btnLoading = true
            const res = await change_register_user({userId:this.id})
            if(res.success){
                this.$message.success('操作成功')
            }else{
               // this.$message.error('操作失败');
            }
            this.btnLoading = false
        }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
  .uploadimgbox{
    display: flex;
    .upItem{
      p{
        color: #999;
      }
      &+.upItem{
        margin: 0 0 0 103px;
      }
    }
  }
</style>


